<template>
	<view class="content login-container">
		<RobotData></RobotData>
		<view class="logo-area">
			<img src="../../static/logo.png"></img>
		</view>
		<view class="title-area">
			<img src="../../static/title.png"></img>
		</view>
		<view class="login-btn">
			<img src="../../static/login-btn.png" @tap="showLogin = true"></img>
			<view class="bqxx">APPLICATIONS ARE HERE</view>
		</view>
		<view class="login-dialog" v-if="showLogin">
			<view class="form-content">
				<block>
					<view class="form-title">账号</view>
					<input type="text" maxlength="11" name="accounts" class="form-item"
						@input="form_input_mobile_event" />
					<view class="form-title">密码</view>
					<input type="password" name="verify" class="form-item" @input="form_input_mobile_password_event" />
					<view class="submit-box">
						<img src="../../static/login-btn.png" class="submit-login" @tap="handleLogin"></img>
					</view>
				</block>
			</view>
		</view>
		<view class="error_dialog" v-if="loginError" @tap="loginError = false">
			<img src="../../static/yzsb.png"></img>
		</view>

	</view>
</template>

<script>
	import RobotData from '@/components/robot/robot.vue';
	export default {
		components: {
			RobotData
		},
		data() {
			return {
				verify_submit_text: '获取验证码',
				verify_disabled: false,
				form_input_mobile_value: '',
				form_input_mobile_password: '',
				verify_time_total: 60,
				showLogin: false,
				loginError: false,
				queryData: {
					type: 1, // 1签到扫码  2 分论坛扫码 3 公开课扫码
					meetType: 1 // 论坛或公开课 1-4 
				}
			}
		},
		onLoad(props) {
			if (props.type) {
				this.queryData = {
					...props
				}
			}
		},
		methods: {
			// 输入手机号码事件
			form_input_mobile_event(e) {
				this.form_input_mobile_value = e.detail.value
			},
			// 输入密码
			form_input_mobile_password_event(e) {
				this.form_input_mobile_password = e.detail.value
			},
			handleLogin() {
				// 网络请求
				uni.showLoading({
					title: '请求中',
				});
				if (this.form_input_mobile_value == '') {
					uni.showToast({
						title: '请输入账号',
						icon: 'error'
					})
					return false;
				}
				if (this.form_input_mobile_password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'error'
					})
					return false;
				}
				uni.request({
					url: 'https://baidu.btvs.cn/api/auth/login',
					method: 'POST',
					data: {
						username: this.form_input_mobile_value,
						password: this.form_input_mobile_password
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.setStorageSync('guestType', 999); // 登录身份 - 工作人员
							uni.setStorageSync('token', res.data.data.access_token);
							uni.navigateTo({
								url: `../qdsm/qdsm?type=${this.queryData.type}&meetType=${this.queryData.meetType}`
							})

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
							this.loginError = true
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络开小差了哦',
							icon: "error"
						})
					},
				});
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/index_bg.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.logo-area {
			width: 120px;
			position: absolute;
			top: 40px;
			right: 40px;
			z-index: 9;

			img {
				width: 100%;
				display: block;
			}
		}

		.title-area {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				margin-top: -200rpx;
				width: 100%;
				display: block;
			}
		}
	}

	.login-btn {
		position: absolute;
		bottom: 60px;
		left: 50%;
		transform: translateX(-50%);

		img {
			width: 300rpx;
		}
	}

	.login-dialog {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-image: url('../../static/login_bg.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		// flex-direction: column;
		align-items: flex-end;
		justify-content: center;

		.submit-box {
			margin-top: 72rpx;
			text-align: center;

			.submit-login {
				width: 320rpx;
			}
		}

		.form-title {
			margin-top: 16px;
			margin-bottom: 8px;
			padding-left: 34rpx;
			font-size: 14px;
			font-weight: 600;
			color: #230d61;
		}

		.form-content {
			width: 80%;
			padding: 34rpx;
			margin-bottom: 200rpx;
		}

		.form-content .form-item,
		.form-content .code,
		.form-content .verify {
			height: 50px;
			line-height: 50px;
			background: #F9F9F9;
			border-radius: 25px;
			border: 0;
		}

		.form-content .code input,
		.form-content .verify input {
			height: 50px;
			line-height: 50px;
			padding: 0 36rpx;
		}

		.form-content .form-item ::v-deep .input-placeholder,
		.form-content .form-item ::v-deep .uni-input-input {
			padding: 0 36rpx;
			font-size: 30rpx;
		}

		.form-content .form-item ::v-deep .input-placeholder,
		.form-content .code input ::v-deep .input-placeholder,
		.form-content .verify input ::v-deep .input-placeholder {
			font-size: 30rpx;
		}

		.form-content .code input,
		.form-content .verify input {
			width: 63%;
		}

		.form-content .form-item ::v-deep .uni-input-input:-webkit-autofill {
			/* //这个地方的颜色是字体颜色，可以根据实际情况修改 */
			/* -webkit-text-fill-color: #ededed !important;  */
			/* //设置input输入框的背景颜色为透明色 */
			-webkit-box-shadow: 0 0 0px 1000px #f9f9f9 inset !important;
			/* //设置input输入框的背景颜色为透明色 */
			background-color: #f9f9f9;
			background-image: none;
			transition: background-color 50000s ease-in-out 0s;
		}

		.form-content .code ::v-deep .uni-input-input:-webkit-autofill {
			/* //设置input输入框的背景颜色为透明色 */
			background-color: #f9f9f9;
			background-image: none;
			transition: background-color 50000s ease-in-out 0s;
		}

		.form-content .code .verify-submit {
			padding: 0 12px;
			height: 28px;
			line-height: 28px;
			top: 11px;
			right: 36rpx;
		}

		.form-content .verify-submit:after {
			border: none;
		}

		.opt-type-list text:not(:last-child) {
			margin-right: 50rpx;
		}

	}

	.error_dialog {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: url('../../static/login_bg.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

		img {
			width: 640rpx;
		}
	}

	.m-b-xl {
		margin-bottom: 18px;
	}

	.pa {
		position: absolute;
	}

	.pr {
		position: relative;
	}

	.br {
		border: none !important;
	}

	.cr-grey,
	.cr-grey-9 {
		color: #999 !important;
	}

	.text-size-sm {
		font-size: 13px !important;
	}

	.login-container {
		.bqxx {
			margin-top: 15rpx;
			width: 100%;
			// position: fixed;
			// bottom: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>